<template>
  <el-container class="home">
    <el-main style="padding: 5px;">

      <el-row :gutter="10" class="mb8" style="margin-left: 15px;">
        <el-form :model="queryParams"  :inline="true" >
          <el-form-item prop="status">
            <span class="el-form-item__label" style="font-weight: 700;">企业</span>
            <el-select
              v-model="queryParams.cd_operator_type"
              placeholder="企业"
              clearable
              size="small"
              @change="Operator"
              style="width: 270px"
            >
              <el-option
                v-for="dict in operators_type"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>

          <el-form-item>

            <span class="el-form-item__label" style="font-weight: 700;"
                  v-hasPermi="['yunze:card:queryParamsChannelId']">所属通道</span>
            <el-select
              v-model="queryParams.channel_id"
              placeholder="所属通道"
              clearable
              v-hasPermi="['yunze:card:queryParamsChannelId']"
              size="small"
              style="width: 270px"
              @change="TariffId"
            >
              <el-option
                v-if="!internalBool"
                v-for="dict in RouteOptions_change"
                :key="dict.cd_id"
                :label="dict.cd_alias"
                :value="dict.cd_id"
              />
              <el-option
                v-if="internalBool"
                v-for="dict in findCr_RouteOptions_change"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />

            </el-select>
          </el-form-item>

          <el-form-item label="资费组" prop="status">
            <el-select
              v-hasPermi="['yunze:cardFlow:queryPackageSimple']"
              v-model="queryParams.package_id"
              placeholder="资费组"
              clearable
              ref="packid"
              size="small"
              style="width: 270px"
              @change="Passageway"
            >
              <el-option
                v-for="dict in packageOptions_change"
                :key="dict.package_id"
                :label="dict.package_agentname"
                :value="dict.package_id"
              />
            </el-select>
          </el-form-item>




        </el-form>

      </el-row>


      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"> <svg-icon icon-class="money" /> 资费信息</span>


          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="24" :lg="24"  v-hasPermi="['yunze:index:lifeCycleDistribution']">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>资费信息</span>
                  <span style="float: right;margin-right: 10px;">
                    <el-button type="primary" style="margin-left: 10px;" size="mini" @click="loadIndex">刷 新</el-button>
                  </span>
                </div>
                <div class="body" >
                  <pie-chart className="Tariff_ShowId" width="100%" height="350px"
                             :P_legend="Tariff_ShowId_P_legend" :P_series="Tariff_ShowId_P_series"
                             :P_color="Tariff_ShowId_P_color"
                  />
                </div>
              </el-card>
            </el-col>
          </el-row>


        </el-tab-pane>
        <el-tab-pane >
          <span slot="label"><svg-icon icon-class="simCard" />  生命周期与类型</span>

          <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="8" :lg="8"  v-hasPermi="['yunze:index:']">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>生命周期分布</span>
                  <span style="float: right;margin-right: 10px;">
                    <el-button type="primary" style="margin-left: 10px;" size="mini" @click="loadIndex">刷 新</el-button>
                  </span>
                </div>
                <div class="body" >
                  <pie-chart className="status_ShowId" width="100%" height="350px" v-if="status_ShowId_show"
                             :P_legend="status_ShowId_P_legend" :P_series="status_ShowId_P_series"
                             :P_color="status_ShowId_P_color"
                  />
                </div>




              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="8" :lg="8"  v-hasPermi="['yunze:index:']">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>卡状态描述分布</span>
                  <span style="float: right;margin-right: 10px;">
                    <el-button type="primary" style="margin-left: 10px;" size="mini" @click="loadIndex">刷 新</el-button>
                  </span>
                </div>
                <div class="body" >
                  <pie-chart className="status_id" width="100%" height="350px" v-if="status_id_show"
                             :P_legend="status_id_P_legend" :P_series="status_id_P_series"
                             :P_color="status_id_P_color"
                  />
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="8" :lg="8"  v-hasPermi="['yunze:index:']">
              <el-card class="update-log">
                <div slot="header" class="clearfix">
                  <span>网络类型</span>
                  <span style="float: right;margin-right: 10px;">
                    <el-button type="primary" style="margin-left: 10px;" size="mini" @click="loadIndex">刷 新</el-button>
                  </span>
                </div>
                <div class="body" >
                  <pie-chart className="network" width="100%" height="350px" v-if="network_show"
                             :P_legend="network_P_legend" :P_series="network_P_series"
                             :P_color="network_P_color"
                  />
                </div>
              </el-card>
            </el-col>

          </el-row>



        </el-tab-pane>
        <el-tab-pane >
          <span slot="label"><svg-icon icon-class="upwardTrend" />  增长趋势</span>


          <el-row :gutter="10" class="mb8" style="margin-left: 15px;">
            <el-form :model="queryParams"  :inline="true" >
              <el-form-item label="查看类型" prop="status">
                <el-select
                  v-model="queryParams.timetype"
                  placeholder="查看类型"
                  clearable
                  size="small"
                  style="width: 560px"
                >
                  <el-option
                    v-for="dict in timetypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"

                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="selTime"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 360px"
                  align="right">
                </el-date-picker>
              </el-form-item>
            </el-form>
          </el-row>

          <el-row :gutter="5">
            <el-col :xs="24" :sm="24" :md="16" :lg="16">
              <line-chart className="CardFlow" width="92%" height="350px" v-if="CardFlow_show"
                          :chart-data="CardFlowArr" :P_xAxis="CardFlow_xAxis" :P_ShowLable="CardFlow_ShowLable"
                          :P_colorArr="CardFlow_colorArr"
                          :CardFlow_config="CardFlow_config"/>
            </el-col>

          </el-row>

        </el-tab-pane>

      </el-tabs>

    </el-main>



  </el-container>
</template>

<script>
import tools from "@/utils/yunze/tools";
import LineChart from './dashboard/LineChart'
import PieChart from './dashboard/PieChart'
import CountTo from 'vue-count-to'

export default {
  name: "businessAnalysis",
  components: {
    PieChart,
    LineChart,
    CountTo,
  },
  created() {


  },
  data() {
    return {
      activeName: 'businessAnalysis',



      cardFlowList: [],//数据排行
      CardFlowArr: {},//折线图 【用量】
      CardFlow_show:true,
      CardFlow_ShowLable: {},//折线图 key 对应显示 lable
      CardFlow_xAxis: [],//折线图 X 轴显示
      CardFlow_colorArr: ['#3c97fd', '#67c23a'],//折线图 颜色
      CardFlow_config: {},//折线图 基础配置


      Tariff_ShowId_P_legend: {},
      Tariff_ShowId_P_series: {
        data:[],
        name: "资费信息",
        radius: [15, 95],
      },
      Tariff_ShowId_P_color: [],

      status_ShowId_show:true,
      status_ShowId_P_legend: {},
      status_ShowId_P_series: {
        data:[],
        name: "生命周期占比",
        radius: [15, 95],
      },
      status_ShowId_P_color: ['#b180f5', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],



      status_id_show:true,
      status_id_P_legend: {},
      status_id_P_series: {
        data:[],
        name: "状态描述占比",
        radius: [15, 95],
      },
      status_id_P_color:['#38cb8e','#fa535f','#fa535f','#fe9e74','#899caf','#899caf','#61c5f9','#303133','#61c5f9','#fa535f',
        '#fa535f','#fa535f','#b180f5','#b180f5','#61c5f9','#899caf','#0186ff','#899caf','#b180f5','#fa535f','#fa535f','#b180f5',
        '#899caf','#899caf','#899caf','#899caf','#fa535f','#899caf','#303133','#fa535f','#fa535f','#fa535f','#fa535f'],


      network_show:true,
      network_P_legend: {},
      network_P_series: {
        data:[],
        name: "网络类型占比",
        radius: [15, 95],
      },
      network_P_color: ['#b180f5', '#0186ff', '#61c5f9', '#38cb8e', '#fa535f', '#fe9e74', '#899caf', '#303133'],




      operator_P_legend: {},
      operator_P_series: {
        data:[],
        name: "生命周期占比",
        radius: [15, 95],
      },
      operator_P_color: ['#3d86db', '#8fc320', '#d80a17', '#38cb8e'],

      // 查询参数
      queryParams: {

      }

    };


  },
  methods: {





  },


};
</script>


<style scoped lang="scss">
.el-tabs--border-card > .el-tabs__content{
  padding: 5px;
}

.el-form-item{
  margin-bottom: 0px;
}
</style>


